{% extends "base.html" %}

{% block title %}Steam Whistle{% endblock %}

{% block content %} 
   <div id="top_block" class="ui-corner-all">
     <h2>Steam Whistle</h2>
     <div id="login_block">
       You are currently logged in as {{ email }}. <a href="{{ logout_url }}">Logout</a>
     </div>
   </div> 
   <div id="tabs">
       <ul>
           <li><a href="#welcome"><span>Welcome</span></a></li>
           <li><a href="#settings"><span>Settings</span></a></li>
           <!--
          <li><a href="#admin"><span>Admin</span></a></li>
        -->
       </ul>
       <div id="welcome">
         <h1>Steam Whistle</h1>
          <h2>Customizable Steam News</h2>
         <div id="call_to_action" class="ui-state-highlight">
           <div id="pre_action_message">Welcome <div id="user_id">{{ nickname }}</div>, your account is already setup!</div> 
           <a href="#settings" id="action_link">Customize</a>
           <div id="post_action_message">Click the link above to customize your notifications</div>
         </div>
         <div class="qa">
           <h2>Is this you?</h2>
           <hr class="light_line"/>
           <ul>
             <li>
               Tired of missing deals on Steam because you didn't check the Steam homepage recently?
               <div class="qa_answer">
                 "Yes! I missed a great 50% off sale just last week."
               </div>
             </li>
             <li>
               Only interested in a couple products, not everything under the sun in the rss newsfeeds?    
               <div class="qa_answer">
                 "Yah, I'd like to hear about TF2 and Left 4 Dead, but not much else."
               </div>
             </li>
             <li>
               Don't follow @steampowered because you don't want all the updates flodding your twitter?
               <div class="qa_answer">
                 "Of course. Twitter is already full of enough noise"
               </div>
             </li>
             <li>
              Wouldn't it be cool to get a customized email notification of everything you're into on Steam?
               <div class="qa_answer">
                 "Now we're talking!"
               </div>
             </li>
           </ul>
         </div>
         <hr/>
         <h4>You should be using Steam Whistle!</h4>
       </div>
       <div id="settings">
         <h2>
           Notification Settings
         </h2>
         <h3>
           From here you can view and update your notification settings
         </h3>
         <div id="settings_form">
           <form action="/settings/update" class="settings_form" method='put'>
             <fieldset>
               <legend>Email Address</legend>
               <div class='set_description'>
                 Where to send your notifications
               </div>
               <label><input name='email' type='text' id='email' value='{{ email }}' class="settings_input"></label>
               <input type='hidden' name='setting' value='email'>
               <input type='submit' name='action' value='Update'>
             </fieldset>
           </form>
           <form action="/settings/update" class="settings_form" method='put'>
             <fieldset>
               <legend>Common Searches</legend>
                 <div class='set_description'>
                   Check these to activate standard notifications of each type.
                 </div>
                 <label><input name='common_term' type='checkbox' value="% Off"{% if commonTerms.pct_off %}checked {% endif %}> "% Off" </label>
                 <label><input name='common_term' type='checkbox' value="Weekend Deal"{% if commonTerms.wknd_deal %}checked {% endif %}> "Weekend Deal" </label>
                 <label><input name='common_term' type='checkbox' value="Sale"{% if commonTerms.sale %}checked {% endif %}> "Sale" </label>
               </legend>
               <input type='hidden' name='setting' value='commonTerms'>
             </fieldset>
           </form>
           <form action="/settings/update" class="settings_form" method='put'>
             <fieldset>
               <legend>Additional Search Criteria</legend>
               <div class='set_description'>
                 Below are listed any additional words you would like to look for.
                 <div class='set_example'>
                   Example: "L4D2" or "Half-Life"
                 </div>
               </div>
               <div class="term_list">
                 <ul>{% for term in includedTerms %}
                     <li>
                       <div class="list_item list_term">"{{ term }}"</div> 
                       <div class="list_item list_delete"><a href='/settings/update?action=delete&setting=includedTerms&term={{ term }}'>remove</a></div>
                     </li>  
                     {% endfor %}
                 </ul>
               </div>
               <div class="clear_float">
                 <label>  
                   <input name='include_term' type='text' class="settings_input">
                 </label> 
                 <input type='hidden' name='setting' value='includedTerms'>
                 <input type='submit' name='action' value='Add'>
               </div>
             </fieldset>
           </form>
           <form action="/settings/update" class="settings_form" method='put'>
             <fieldset>
               <legend>Exclusions</legend>
               <div class='set_description'>
                 Add any words you want to ignore, even if they match the above search criteria.
                 <div class='set_example'>
                   Example: "Nancy Drew" would exclude the subject "Nancy Drew 99% Off".
                 </div>
               </div>
               <div class="term_list">
                 <ul>
                   {% for term in excludedTerms %}
                     <li>
                        <div class="list_item list_term">"{{ term }}"</div> 
                        <div class="list_item list_delete"><a href='/settings/update?action=delete&setting=excludedTerms&term={{ term }}'>remove</a></div>
                      </li>  
                   {% endfor %}
                 </ul>
               </div>
               <label>  
                 <input name='exclude_term' type='text' class="settings_input">
               </label> 
               <input type='hidden' name='setting' value='excludedTerms'>
               <input type='submit' name='action' value='Add'>
             </fieldset>
           </form>
          </div> <!-- div: settings_form -->
       </div> <!-- div: settings -->
<!--
       <div id="admin">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
       </div>
-->
   </div>
{% endblock %}
